<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			html{
				height:100%;
			}
			
			/* body占父容器html高度的100% */
			body{
				height:100%;
			}
			/* div占父容器body高度的100% */
			#page1{
				height:100%;
				/* 背景图默认是横向和纵向都平铺 */
				background-image:url(img/halloween1.jpg);
				/* 横向和纵向都不重复 */
				background-repeat:no-repeat;
				/* 设置背景的大小 */
				background-size: 100% 100%;
				
			}
			#page2{
				height:100%;
				/* 背景图默认是横向和纵向都平铺 */
				background-image:url(img/halloween2.jpg);
				/* 横向和纵向都不重复 */
				background-repeat:no-repeat;
				/* 设置背景的大小 */
				background-size: 100% 100%;
				/* 隐藏 */
				display: none;
			}
			#page3{
				height:100%;
				/* 背景图默认是横向和纵向都平铺 */
				background-image:url(img/halloweenMain3.jpg);
				/* 横向和纵向都不重复 */
				background-repeat:no-repeat;
				/* 设置背景的大小 */
				background-size: 100% 100%;
				display: none;
			
					}
			#page4{
				height:100%;
				/* 背景图默认是横向和纵向都平铺 */
				background-image:url(img/charm1.jpg);
				/* 横向和纵向都不重复 */
				background-repeat:no-repeat;
				/* 设置背景的大小 */
				background-size: 100% 100%;
				display: none;
							}
			/* ID选择器，选择在页面内id唯一的元素 #ID选择器 */
			/* 类选择器 用法：。类名 */
			#titel{
				position: absolute;
				left:327px;
				top:100px;
				/* 动画属性 */
				animation: titleframes 2s ;
			}
			/* 关键帧 */
			
			@keyframes titleframes{
				0%{
					opacity: 0;
				}
				100%{
					opacity: 1;
				}
			}
			#box{
				/* 绝对定位：距离父容器 左，右，上，下 设置 */
				position: absolute;
				left:318px;
				bottom: 250px;
				animation: boxframes 1s infinite;
				}
				
				
				@keyframes boxframes{
					from{
						left:318px;
					}
					to{
						left:368px
					}
				}
		</style>
	</head>
	<body>
		<div id="page1">
			<img id="title" src="img/title.png" >
			<img id="box" src="img/box.png" >
		</div>
		<div id="page2">
			
		</div>
		<div id="page3">
			
		</div>
		<div id="page4">
			
		</div>
、
	</body>
</html>
